<%@ page language="java" import="java.util.*" pageEncoding="utf-8" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <meta name="format-detection" content="telephone=no,email=no,address=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes">
    <title>MiniDialog</title>
    <style>
        @font-face {
            font-family: InputMono;
            src: url(../fonts/InputMono.ttf)
        }

        * {
            margin: 0;
            padding: 0;
            outline: 0;
            font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "PingFang SC", Arial, sans-serif
        }

        body {
            background: #f7f7f7
        }

        header {
            height: 40px;
            line-height: 40px;
            color: #fff;
            background: #3f3f3f;
            text-align: center;
            font-size: 15px
        }

        #container {
            position: relative;
            width: 800px;
            height: auto;
            margin: 0 auto;
            box-shadow: #eaeaea 0 0 12px;
            background: #fff;
            display: none
        }

        .box {
            width: 740px;
            border-bottom: #fff solid 1px;
            margin: 0 auto;
            padding: 30px 0
        }

        .box > p {
            text-align: center;
            font-size: 20px;
            font-weight: 700;
            margin: 10px 0 24px 0
        }

        .button-box {
            text-align: center
        }

        button {
            display: inline-block;
            background: #fff;
            border: #09f solid 1px;
            color: #09f;
            padding: 8px 10px;
            border-radius: 4px;
            font-size: 12px;
            cursor: pointer;
            margin-right: 6px;
            transition: .2s
        }

        button:hover {
            opacity: .8
        }

        .code {
            border-radius: 4px;
            font-size: 11px;
            background: #fcfcfc;
            padding: 16px;
            margin: 20px 0 0 0;
            border: #eaeaea solid 1px;
            line-height: 170%;
            overflow-x: auto
        }

        .code, .code * {
            font-family: InputMono, Consolas
        }

        span[fn] {
            color: #7e00ee
        }

        span[value] {
            color: #d70f41
        }

        span[attr] {
            color: #009595
        }

        span[note] {
            color: #999
        }

        #button-box-4 p {
            margin-top: 20px;
            font-size: 13px;
            cursor: pointer;
            color: #777
        }

        #shortcut {
            position: fixed;
            top: 50%;
            right: 0;
            transform: translateY(-50%);
            font-size: 13px;
            text-align: center;
            border: #e8e8e8 solid 1px;
            border-radius: 0 6px 6px 0;
            overflow: hidden
        }

        #shortcut div {
            height: 40px;
            line-height: 40px;
            background: #fff;
            cursor: pointer;
            padding: 0 8px;
            transition: .2s
        }

        #shortcut div:not(:last-child) {
            border-bottom: #e8e8e8 solid 1px
        }

        #shortcut div:hover {
            background: #f8f8f8
        }

        @media screen and (max-width: 768px) {
            header {
                height: 46px;
                line-height: 46px;
                font-size: 16px
            }

            #container {
                width: 100%
            }

            .box {
                width: calc(100% - 60px)
            }
        }

        .links {
            padding: 30px 0;
            text-align: center;
            overflow: hidden
        }

        .links a {
            display: inline-block;
            font-size: 14px;
            background: #09f;
            color: #fff;
            padding: 7px 0;
            border-radius: 4px;
            text-decoration: none;
            width: 100px;
            text-align: center;
            transition: .2s
        }

        .links a:hover {
            opacity: .8
        }
    </style>
</head>
<body>
<section id="container">
    <header>MiniDialog 对话框</header>
    <div class="box">
        <p>信息展示</p>
        <div class="button-box" id="button-box-1">
            <button class="shortcuts">Info 信息</button>
            <button class="shortcuts">Success 成功</button>
            <button class="shortcuts">Warn 警告</button>
            <button class="shortcuts">Error 错误</button>
        </div>
        <div class="code">
<pre><span fn>Dialog.info</span>( <span value>"info 对话框"</span>, <span value>"内容区域"</span> );
<span fn>Dialog.success</span>( <span value>"success 对话框"</span>, <span value>"内容区域"</span> );
<span fn>Dialog.warn</span>( <span value>"warn 对话框"</span>, <span value>"内容区域"</span> );
<span fn>Dialog.error</span>( <span value>"error 对话框"</span>, <span value>"内容区域"</span> );
</pre>
        </div>
    </div>
    <div class="box">
        <p>信息展示 - 手动控制</p>
        <div class="button-box">
            <button id="shortcuts-ok-callback">回调事件</button>
            <button id="shortcuts-ok-notclose">阻止正常关闭</button>
            <button id="shortcuts-ok-notclose-with-word">阻止正常关闭并改变按钮状态</button>
        </div>
        <div class="code">
<pre><span fn>Dialog.info</span>( <span value>"info 对话框"</span>, <span value>"内容区域"</span> ).<span fn>ok</span>(function () {
    alert( <span value>"回调事件"</span> );
});
<span fn>Dialog.info</span>( <span value>"info 对话框"</span>, <span value>"内容区域"</span> ).<span
            fn>okNotClose</span>().<span fn>ok</span>(function () {
    window.setTimeout(function () {
        <span fn>Dialog.close()</span>;
    }, 3000)
});
<span fn>Dialog.info</span>( <span value>"info 对话框"</span>, <span value>"内容区域"</span> ).<span
            fn>okNotClose</span>().<span fn>ok</span>(function ( <span fn>okBtn</span> ) {

    <span note>// 改变按钮文字</span>
    <span fn>okBtn</span>.querySelector( <span value>"span"</span> ).textContent = <span value>"3 秒后关闭..."</span>;

    <span note>// "mini-dialog-ok-disabled" 是内置的 class 可以使按钮不可再点击</span>
    <span fn>okBtn</span>.classList.add( <span value>"mini-dialog-ok-disabled"</span> );

    <span note>// 3 秒后关闭对话框</span>
    window.setTimeout(function () {
        <span fn>Dialog.close()</span>;
    }, 3000)
});
</pre>
        </div>
    </div>
    <div class="box">
        <p>快捷方式</p>
        <div class="button-box" id="button-box-2">
            <button>内容</button>
            <button>标题 + 内容</button>
            <button>标题 + 内容 + 宽度</button>
        </div>
        <div class="code">
<pre><span fn>Dialog</span>( <span value>"内容"</span> );
<span fn>Dialog</span>( <span value>"标题"</span>, <span value>"内容"</span> );
<span fn>Dialog</span>( <span value>"标题"</span>, <span value>"内容"</span>, <span value>800</span> );
</pre>
        </div>
    </div>
    <div class="box">
        <p>常规配置</p>
        <div class="button-box" id="button-box-3">
            <button>标题 + 内容</button>
            <button>标题 + 内容 + 宽度</button>
            <button>内容区域背景色</button>
        </div>
        <div class="code">
<pre><span fn>Dialog</span>({
    <span attr>title</span>: <span value>"标题"</span>,
    <span attr>content</span>: <span value>"内容"</span>
});
<span fn>Dialog</span>({
    <span attr>title</span>: <span value>"标题"</span>,
    <span attr>content</span>: <span value>"内容"</span>,
    <span attr>width</span>: <span value>800</span>
});
<span fn>Dialog</span>({
    <span attr>title</span>: <span value>"标题"</span>,
    <span attr>content</span>: <span value>"内容"</span>,
    <span attr>contentBgColor</span>: <span value>"#f5f5f5"</span>
});
</pre>
        </div>
    </div>
    <div class="box">
        <p>可拖动对话框</p>
        <div class="button-box" id="button-box-4">
            <button>打开一个对话框</button>
            <p><span>关闭所有对话框</span></p>
        </div>
        <div class="code">
<pre><span fn>Dialog</span>({
    <span attr>title</span>: <span value>"标题"</span>,
    <span attr>content</span>: <span value>"内容"</span>,
    <span attr>draggable</span>: <span value>true</span>
});
</pre>
        </div>
    </div>
    <div class="box">
        <p>全屏对话框</p>
        <div class="button-box" id="button-box-5">
            <button>全屏对话框</button>
        </div>
        <div class="code">
<pre><span fn>Dialog</span>({
    <span attr>title</span>: <span value>"标题"</span>,
    <span attr>content</span>: <span value>"内容"</span>,
    <span attr>fullscreen</span>: <span value>true</span>
});
</pre>
        </div>
    </div>
    <div class="box">
        <p>自动关闭</p>
        <div class="button-box" id="button-box-6">
            <button>可自动关闭</button>
        </div>
        <div class="code">
<pre><span fn>Dialog</span>({
    <span attr>title</span>: <span value>"标题"</span>,
    <span attr>content</span>: <span value>"内容"</span>,
    <span attr>autoClose</span>: <span value>5000</span>
});
</pre>
        </div>
    </div>

    <div class="box">
            <p>嵌入 Iframe</p>
            <div class="button-box" id="button-box-7">
                <button>打开对话框</button>
            </div>
            <div class="code">
                <pre><span fn>Dialog</span>({
                    <span attr>title</span>: <span value>"标题"</span>,
                    <span attr>width</span>: <span value>1100</span>,
                    <span attr>iframeContent</span>: {
                        <span attr>src</span>: <span value>"http://www.baidu.com/"</span>,
                        <span attr>height</span>: <span value>600</span>
                    },
                    <span attr>showButton</span>: <span value>false</span>
                });
                </pre>
            </div>
    </div>

    <div class="box">
        <p>嵌入图片</p>
        <div class="button-box" id="button-box-8">
            <button>打开对话框</button>
        </div>
        <div class="code">
<pre><span fn>Dialog</span>({
    <span attr>width</span>: <span value>1100</span>,
    <span attr>imageContent</span>: {
        <span attr>src</span>: <span value>"demo.png"</span>,
        <span attr>height</span>: <span value>600</span>
    },
    <span attr>showButton</span>: <span value>false</span>,
    <span attr>showTitle</span>: <span value>false</span>,
    <span attr>maskClose</span>: <span value>true</span>
});
</pre>
        </div>
    </div>
    <div class="box">
        <p>嵌入多张图片</p>
        <div class="button-box" id="button-box-9">
            <button>打开对话框</button>
        </div>
        <div class="code">
            <pre><span fn>Dialog</span>({
                <span attr>width</span>: <span value>700</span>,
                <span attr>imageContent</span>: {
                    <span attr>src</span>: [ <span value>"1.png"</span>, <span value>"2.png"</span>, <span
                        value>"3.png"</span>, <span value>"4.png"</span>, <span value>"5.png"</span> ],
                    <span attr>height</span>: <span value>400</span>
                },
                <span attr>showButton</span>: <span value>false</span>,
                <span attr>showTitle</span>: <span value>false</span>,
                <span attr>maskClose</span>: <span value>true</span>
            });
            </pre>
        </div>
    </div>
    <div class="box">
        <p>嵌入视频</p>
        <div class="button-box" id="button-box-10">
            <button>打开对话框</button>
        </div>
        <div class="code">
<pre><span fn>Dialog</span>({
    <span attr>width</span>: <span value>800</span>,
    <span attr>videoContent</span>: {
        <span attr>src</span>: <span value>"demo.mp4"</span>,
        <span attr>height</span>: <span value>450</span>
    },
    <span attr>showButton</span>: <span value>false</span>,
    <span attr>showTitle</span>: <span value>false</span>,
    <span attr>maskClose</span>: <span value>true</span>
});
</pre>
        </div>
    </div>
    <div class="box">
        <p>确定按钮 - 等待中</p>
        <div class="button-box" id="button-box-11">
            <button>打开对话框</button>
        </div>
        <div class="code">
<pre><span fn>Dialog</span>({
    <span attr>title</span>: <span value>"标题"</span>,
    <span attr>content</span>: <span value>"内容"</span>,
    <span attr>ok</span>: {
        <span attr>waiting</span>: <span value>true</span>,
        <span attr>waitingText</span>: <span value>"等一会"</span>,
        <span attr>callback</span>: function () {
            window.setTimeout(function () {
                <span fn>Dialog.close</span>();
            }, 3000)
        }
    }
});
</pre>
        </div>
    </div>
    <div class="box">
        <p>按钮事件</p>
        <div class="button-box" id="button-box-12">
            <button>打开对话框</button>
        </div>
        <div class="code">
<pre><span fn>Dialog</span>({
    <span attr>title</span>: <span value>"标题"</span>,
    <span attr>content</span>: <span value>"内容"</span>,
    <span attr>ok</span>: {
        <span attr>callback</span>: function () {
            alert( <span value>"确定"</span> );
        }
    },
    <span attr>cancel</span>: {
        <span attr>callback</span>: function () {
            alert( <span value>"取消"</span> );
        }
    }
});
</pre>
        </div>
    </div>
    <div class="box">
        <p>开关事件</p>
        <div class="button-box" id="button-box-13">
            <button>打开对话框</button>
        </div>
        <div class="code">
<pre><span fn>Dialog</span>({
    <span attr>title</span>: <span value>"标题"</span>,
    <span attr>content</span>: <span value>"内容"</span>,
    <span attr>afterOpen</span>: function () {
        alert( <span value>"打开了对话框"</span> );
    },
    <span attr>afterClose</span>: function () {
        alert( <span value>"关闭了对话框"</span> );
    }
});
</pre>
        </div>
    </div>
    <div class="box">
        <p>隐藏头尾</p>
        <div class="button-box" id="button-box-14">
            <button class="a">隐藏标题</button>
            <button class="b">隐藏按钮</button>
            <button class="c">隐藏标题和按钮</button>
        </div>
        <div class="code">
<pre><span fn>Dialog</span>({
    <span attr>content</span>: <span value>"内容"</span>,
    <span attr>showTitle</span>: <span value>false</span>
});
<span fn>Dialog</span>({
    <span attr>content</span>: <span value>"内容"</span>,
    <span attr>showButton</span>: <span value>false</span>
});
<span fn>Dialog</span>({
    <span attr>content</span>: <span value>"内容"</span>,
    <span attr>showTitle</span>: <span value>false</span>,
    <span attr>showButton</span>: <span value>false</span>,
    <span attr>maskClose</span>: <span value>true</span>
});
</pre>
        </div>
    </div>
    <div class="box">
        <p>等待中</p>
        <div class="button-box">
            <button id="waiting">等待中弹窗</button>
            <button id="waiting-countdown">带有倒计时的等待中弹窗</button>
        </div>
        <div class="code">
<pre><span fn>Dialog.waiting</span>( <span value>"处理中，请等待..."</span> );
<span fn>Dialog.waiting</span>(function ( <span value>$text</span> ) {
    var timer = null;
    var num = 6;
    var <span value>fn</span> = function () {
        <span value>num--</span>;
        $text.innerHTML = <span value>"处理中，请等待...&lt;br&gt;"</span> + <span value>num</span>;
        if ( !<span value>num</span> ) {
            window.clearInterval( <span value>timer</span> );
            <span fn>Dialog.close();</span>
        }
    }
    <span value>fn</span>();
    timer = window.setInterval( <span value>fn</span>, <span value>1000</span> );
});
</pre>
        </div>
    </div>
</section>
<script src="../js/minidialog/MiniDialog-es5.min.js"></script>
<script src="../js/minidialog/demo.js"></script>
</body>
</html>